<template>
    <div class="nearList__item">
        <img src="http://www.dell-lee.com/imgs/vue3/near.png" class="nearList__item__img" />
        <div class="nearList__item__content">
            <div class="title">{{ item.title }}</div>
            <div class="tag">
                <span v-for="t in item.tag">{{ t }}</span>
            </div>
            <div class="tag red">{{ item.vip }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import type { PropType } from 'vue'
import type { NearbyItem } from '../types/types'
const props = defineProps({
    item: {
        type: Object as PropType<NearbyItem>,
        required: true
    }
})
</script>

<style scoped lang="scss">
.nearList__item {
    display: flex;
    margin: 0.12rem;
    .nearList__item__img {
        width: 0.56rem;
        height: 0.56rem;
        // margin-left: 0.18rem;
        margin-right: 0.16rem;
    }
    .nearList__item__content {
        flex: 1;
        color: #333;
        .title {
            font-size: 0.16rem;
            line-height: 0.22rem;
            margin-bottom: 0.08rem;
        }
        .tag {
            font-size: 0.13rem;
            margin-bottom: 0.08rem;
            line-height: 0.18rem;
            span{
                margin-right: .08rem;
            }
        }
        .red {
            color: #e93b3b;
            margin-bottom: 0.08rem;
        }
    }
}
</style>